<!DOCTYPE html>
<html lang="zh-CNs">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学海书舫图书馆</title>
    <link rel="Shortcut Icon" href="./favicon.ico">
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/Vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="readerLogin" class="container">
        <div class="login-wrapper">
            <div class="header">读者登录</div>
            <div id="error"></div>
            <el-form ref="loginForm" :model="readerLoginForm" :rules="rules" class="form-wrapper">
                <el-form-item prop="username">
                    <el-input v-model="readerLoginForm.username" placeholder="用户名、电话或邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="readerLoginForm.password" placeholder="密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-row>
                        <el-col :span="12">
                            <el-input v-model="captcha" placeholder="验证码"></el-input>
                        </el-col>
                        <el-col :span="10">
                            <el-image style="width: 170px; height: 40px; margin-left: 10px" :src="url" @click="checkimage"></el-image>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-button type="btn" @click="readerLogin">登录</el-button>
            </el-form>
            <div class="msg">
                没有账号？
                <el-link icon="el-icon-edit" href="./registered.html">注册</el-link>
                &nbsp;&nbsp;&nbsp;管理员？
                <el-link href="./adminLogin.html">管理员登录</el-link>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#readerLogin',
            mounted() {
                const key = (location.hash).substring(1, location.hash.length)
                if (key === '-1') {
                    document.getElementById("error").innerText = '请先登录'
                }
            },
            methods: {
                checkimage() {
                    this.url = 'http://localhost:9090/BookManage/login/getCode?' + new Date().getMilliseconds();
                },
                readerLogin() {
                    this.$refs['loginForm'].validate((valid) => {
                        if (valid) {
                            axios({
                                method: 'post',
                                url: 'http://localhost:9090/BookManage/login/CheckReaderPassword',
                                data: this.readerLoginForm
                            }).then(resp => {
                                if (resp.data === 'incorrect') {
                                    this.readerLoginForm = { username: "", password: "", }
                                    this.captcha = ""
                                    this.isSuccess = 'failure'
                                    document.getElementById("error").innerText = '用户名或密码错误'
                                    this.checkimage()
                                } else {
                                    location.replace("http://localhost:9090/BookManage/readerIndex.html")
                                }
                            })
                        }
                    });
                }
            },
            data() {
                const validateCaptcha = (rule, value, callback) => {
                    axios({
                        method: 'get',
                        url: 'http://localhost:9090/BookManage/login/checkCode?captcha=' + this.captcha
                    }).then(resp => {
                        this.isSuccess = resp.data
                    })
                    if (this.captcha === '') {
                        callback(new Error('请输入验证码'));
                    } else {
                        setTimeout(() => {
                            if (this.isSuccess === 'failure') {
                                callback(new Error('验证码错误'));
                            }
                            callback();
                        }, 10)

                    }
                };
                return {
                    isSuccess: 'failure',
                    rules: {
                        username: [{ required: true, message: '请输入用户名、电话或邮箱', trigger: ['blur', 'change'] }],
                        password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
                        captcha: [{ validator: validateCaptcha, trigger: ['blur', 'change'] }]
                    },
                    readerLoginForm: {
                        username: "",
                        password: "",
                    },
                    captcha: "",
                    url: 'http://localhost:9090/BookManage/login/getCode'
                }
            }
        })
    </script>
</body>

</html>